<template>
  <div class="software" @click="$refs.header1.tabShow = false">
    <header-tab ref="header1" />
    <div class="wrap" id="wrap-m">
      <div class="product">
        <div class="product-type" id="productType">
          <div class="mode-pc">
            <div class="type-wrap">
              <ul class="type clearfix">
                <li v-for="(item, index) in tabs" :key="item.id">
                  <div
                    class="par-type j-product-type"
                    :class="[tabIndex == index ? 'active' : '']"
                    @click="changeTab(index)"
                  >
                    {{ item.name }}
                  </div>
                  <div class="sub-type">
                    <div class="arrow-up">
                      <div class="arrow-up-block"></div>
                    </div>

                    <a
                      href="javascript:void(0)"
                      class="j-product-type"
                      v-for="(v, k) in item.list"
                      :key="v.id"
                      @click="changeTab(index, k, v.id)"
                      >{{ v.name }}</a
                    >
                  </div>
                </li>
              </ul>
            </div>
            <div class="product-type-space"></div>
          </div>
          <div class="mode-me">
            <div class="type-wrap">
              <div class="type-head">
                <div class="title"><i></i>产品列表</div>
                <div
                  class="select"
                  id="j-m-typeChoice"
                  @click="showKinds = true"
                >
                  <span>{{ selectedTab.name }}</span
                  ><i></i>
                </div>
              </div>
            </div>
            <div class="product-type-space"></div>
          </div>
        </div>
        <div class="yx-product">
          <ul class="list clearfix" id="YxproductList"></ul>
        </div>

        <kinds-list
          :showKinds="showKinds"
          :tabs="tabs"
          @hideKinds="hideKinds"
        ></kinds-list>

        <div class="product-list">
          <ul class="list clearfix" id="productList">
            <li v-for="(item, index) in dataList" :key="index">
              <router-link to="/productDetail">
                <span class="icon_optimal"></span>
                <div class="pic"><img :src="item.image | imgValitate(url)" /></div>
                <h3 class="tit">{{ item.title }}</h3>
                <p class="desc">{{ item.introduce }}</p>
                <div class="price">¥{{ item.price }}</div>
              </router-link>
            </li>
          </ul>
          <div class="loadmore" id="loadProductList">
            <div class="loading"></div>
          </div>
        </div>
      </div>
    </div>
    <footer-tab />
  </div>
</template>

<script>
import HeaderTab from "@/components/headerTab";
import FooterTab from "@/components/FooterTab";
import KindsList from "@/components/KindsList";

export default {
  components: {
    HeaderTab,
    FooterTab,
    KindsList,
  },
  data() {
    return {
      showKinds: false,
      tabIndex: 0,
      tabs: [{ id: 1, name: "全部" }],
      selectedTab: { id: 1, name: "全部" },
      dataList: [],
      url: this.$url,
    };
  },
  mounted() {
    this.getTabs();
    this.getDataList();
  },
  methods: {
    // 获取服务分类
    getTabs() {
      this.$http.post("index/getfuwufenlei").then((res) => {
        this.tabs = this.tabs.concat(res);
      });
    },

    getDataList(id) {
      let url = id ? "/index/getcategoryfuwu" : "index/getquanbufuwu";
      let param = id ? { id: id } : {};
      this.$http.post(url, param).then((res) => {
        console.log(res);
        this.dataList = res;
      });
    },
    hideKinds(obj) {
      console.log(obj);
      this.showKinds = false;
      if (obj) {
        if (obj.index == 0) {
          this.selectedTab = this.tabs[0];
          this.getDataList();
        } else {
          this.selectedTab = this.tabs[obj.index].list[obj.k];
          this.getDataList(this.selectedTab.id);
        }
      }
    },
    changeTab(index, k, id) {
      this.tabIndex = index;
      if (index > 0) {
        console.log(typeof k);
        if (typeof k == "number") {
          this.getDataList(id);
        }
      } else {
        this.getDataList();
      }
    },
  },
  filters: {
    imgValitate: function (value, url) {
      let imgurl = value;
      if (!imgurl.includes("http")) {
        imgurl = url + imgurl;
      }
      return imgurl;
    },
  },
};
</script>

<style scoped>
.product .product-type .mode-me {
  position: fixed;
  top: 1.6rem;
  width: 100%;
  z-index: 15;
  background: #f7f7f8;
}
@media screen and (max-width: 1200px) {
  .wrap,
  .container {
    background: #f6f7f8;
  }
}
</style>
